<template>
    <div class="odiv">
        <li v-for='item of shopdata' :key='item.id'>
            <img :src="item.imgUrl" alt=""/>
            <a href="#">{{item.name}}</a>
            <a class='a2' href="#">{{item.unitPrice}}</a>

        </li>
    </div>
</template>

<script>
export default {
    props:{
        shopdata:{
            type:Array
        }
    },
    created(){
        console.log(this.shopdata);
    }
}
</script>

<style lang='scss' scoped>
$appwidth:375;


@function pxtovw($p){
    @return (100/$appwidth*$p) * 1vw;
}
.odiv{
    width: 100%;
   
     
  
    li{
        width: 49%;
        height: pxtovw(270);
        float: left;
      

        img{
            width: 100%;
            height: pxtovw(220);
        }
        a{
            display: inline-block;
            text-align: center;
            width: 100%;
            text-decoration: none;
            color: #233;
            font-size: pxtovw(14);
        }
        .a2{
            color: orange;
        }
    }
    li:nth-child(2n){
          margin-left: pxtovw(4);
    }

}

</style>
